<template>
  <div class="cl">
    <el-card class="box-card">
      <div>
        <el-button style="margin-top:30px;margin-left: 20px;" type="primary" @click="openWindow">修改信息</el-button>
        <el-button style="margin-top:30px;margin-left: 20px;" type="primary" @click="openWindows">修改车位价格</el-button>
        <el-descriptions title="物业详细信息" style="margin-left: 50px;  margin-top: 10px;" direction="vertical" :column="3"
          :size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              物业名称
            </template>
            {{certified.certifiedInfoName}}</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-flag"></i>
              充电车位数
            </template>{{certified.stallChargeNum}}个</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              物业地址
            </template>
            {{certified.certifiedInfoAddress}}</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-on"></i>
              物业评分
            </template>
            <el-tag type="success">{{certified.certifiedInfoScore}}分</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-on"></i>
              普通车位价格
            </template>
            <el-tag type="success">{{certified.stallUnitPrice}}元</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-on"></i>
              充电车位价格
            </template>
            <el-tag type="success">{{certified.chargeUnitPrice}}元</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-flag"></i>
              普通车位数
            </template>
            {{certified.stallCommonNum}}个</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              物业电话
            </template>
            <el-tag size="medium">{{certified.certifiedInfoTel}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture"></i>
              营业执照
            </template>
            <el-avatar shape="square" :src="certified.certifiedInfoImg" style="width: 380px;height: 200px;"></el-avatar>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-dialog title="修改物业信息" :modal-append-to-body="false" :visible.sync="showRegister" width="40%"
      :before-close="handle">
      <el-form :model="upCertified" ref="upCertified" label-width="170px" class="demo-ruleForm">
        <el-form-item label="请输入联系方式:">
          <el-input type="text" v-model="upCertified.certifiedInfoTel" style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateCertified">确定</el-button>
          <el-button type="primary" @click="closeWindow">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改物业价格" :modal-append-to-body="false" :visible.sync="showRegisters" width="40%"
      :before-close="handle">
      <el-form :model="upStallPrice" ref="upStallPrice" label-width="170px" class="demo-ruleForm">
        <el-form-item label="请输入普通车位价格:">
          <el-input type="text" v-model="upStallPrice.stallUnitPrice" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="请输入充电车位价格:">
          <el-input type="text" v-model="upStallPrice.chargeUnitPrice" style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateStallPrice">确定</el-button>
          <el-button type="primary" @click="closeWindow">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'CertifiedInfo',
    data() {
      return {
        formLabelWidth: "120px",
        certified: [],
        showUpdateWindow: false,
        headers: {
          "token": localStorage.getItem("authorization")
        },
        upCertified: {
          certifiedInfoTel: "",
        },
        showRegister: false,
        showRegisters: false,

        certifiedImg: {
          certifiedInfoImg: ""
        },
        upStallPrice: {
          stallUnitPrice: "",
          chargeUnitPrice: "",
        },
        certifiedImg: {
          certifiedInfoImg: ""
        }
      }
    },
    methods: {
      handle() {
        this.showRegister = false
        this.showRegisters = false
      },
      select() {
        this.$http.get("/certified/certifiedInfo/selectCertified.certified").then(resp => {
          this.certified = resp.data.data
        })
      },
      //ssss
      updateCertified() {
        this.$http.post("/certified/certifiedInfo/updateCertifiedInfo.certified", this.certifiedInfo).then(
          resp => {
            this.$message({
              message: resp.data.message,
              type: (resp.data.code == 200 ? 'success' : 'error')
            })
            this.select()
            this.closeWindow()
            this.upCertified = null
          })
      },
      updateStallPrice() {
        this.$http.post("/certified/certifiedInfo/updateStallPrice.certified", this.upStallPrice).then(
          resp => {
            this.$message({
              message: resp.data.message,
              type: (resp.data.code == 200 ? 'success' : 'error')
            })
            this.select()
            this.closeWindow()
            this.upStallPrice = null
          })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //cc
      closeWindow() {
        this.upCertified.certifiedInfoTel = null
        this.upStallPrice.stallUnitPrice = null
        this.upStallPrice.chargeUnitPrice = null
        this.showRegister = false
        this.showRegisters = false
        this.showUpdateWindow = false
      },
      openWindow() {
        this.showRegister = true
        let upCertified = JSON.stringify(this.upCertified)
        this.upCertified = JSON.parse(upCertified)
      },
      openWindows() {
        this.showRegisters = true
        let upStallPrice = JSON.stringify(this.upStallPrice)
        this.upStallPrice = JSON.parse(upStallPrice)
      },
      uploadSuccess(resp) { //上传图片
        this.certifiedImg.certifiedInfoImg = resp.data
      },
    },
    created() {
      this.select()
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box-cards {
    margin-top: 20px;
    height: 700px;
    width: 100%;
  }
</style>
